<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>深度监视</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>

    
        <div id ="root">
            <h2>今天天气很{{info}}</h2>
             <!-- 方式2.使用计算属性 -->
            <button @click="changeWeather">切换天气</button>
            <br/><br/>
            <h2>a的值：{{numbers.a}}</h2>
            <button @click="numbers.a++">a++</button>
            <br/><br/>
            <h2>b的值：{{numbers.b}}</h2>
            <button @click="numbers.b++">b++</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    numbers:{
                        a:1,
                        b:1
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                //监视属性
                watch:{
                    //监视的属性名
                    isHot:{
                        //immediate:true, //默认false--作用：初始化时就调用handler方法
                        //handler:在isHot发生改变时调用，并携带新值和旧值
                        handler(newValue,oldValue){
                            console.log('isHot被修改了！',newValue,oldValue)
                        }
                    },
                    //要求1：监视单个属性的变化
                    //加引号是原生写法，大部分可以省略
                    //监视多级结构的某个属性必须加引号
                    'numbers.a':{
                        handler(){
                            console.log('a被修改了')
                        }
                    },
                    //要求2：假设numbers有很多属性，当某个属性变化都要监视
                    //监视多级属性中所有属性的变化
                    numbers:{
                        deep:true,
                        handler(){
                            console.log('numbers中的属性变化了')
                        }
                    }
                }
            
            })
           
        </script>

        
    </body>
</html>